<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .done li {
            color: gray;
            text-decoration: line-through;
        }

        .todo li {
            width: 170px;
            height: 30px;
            position: relative;
        }

        .todo li button {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <p>待办事项</p>
    <!-- 第一部分，记录 -->
    <input type="text" id="inp" placeholder="请输入待办事项">
    <button onclick="save()">保存</button>
    <!-- 第二部分，待办事项 -->
    <p>待办事项</p>
    <ol id="todo" class="todo">
        
    </ol>
    <!-- 第三部分，已完成事项 -->
    <p>已完成事项</p>
    <ol id="done" class="done">
    </ol>

    <script>
        // 存放事件的数组
        let eventList = [];
        // 保存事件，添加到数组中
        function save() {
            // 获取事件，就是输入框的值
            // inp是输入框的id，这可以代表整个元素，这是js的缩写
            let event = inp.value;
            // 向数组添加内容，用来保存数据
            eventList.push(event);
            // 声明一个字符串，用来盛放ol元素中的内容
            let content = '';
            // for循环，遍历数组，获取每一个事项并累加
            for (let index = 0; index < eventList.length; index++) {
                content += `<li>${eventList[index]}</li>`
            }
            // 添加到ol元素上
            todo.innerHTML = content;
        }
    </script>
</body>

</html>